<template>
	<view class="user-box">
		<!-- 头部用户区域 -->
		<view class="user-area">
			<view class="avatar">
				<!-- 用户头像 -->
				<image class="avatar-icon" src="/static/image/avatar.png" @click="updataAvatar"></image>
			</view>
			<view class="user-login">
				<button class="user-login-btn" @click="userLoginPage">立即登录</button>
			</view>
			<view class="user-name-area">
				<text class="user-name">用户名：zzh</text>
			</view>
			<view class="setting" @click="subSetting">
				<image class="setting-icon" src="/static/image/setting.png"></image>
				<view class="setting-name">设置</view>
			</view>
		</view>

		<!-- 订单区域 -->
		<view class="order-area">
			<view class="order-msg" @click="subOrder">
				<image class="order-icon" src="/static/image/order.png"></image>
				<text>我的订单</text>
			</view>
			<view class="address-msg" @click="subAddress">
				<image class="address-icon" src="/static/image/address.png"></image>
				<text class="order-text">地址管理</text>
			</view>
			<view class="footmark-msg" @click="subFootmark">
				<image class="footmark-icon" src="/static/image/footmark.png"></image>
				<text class="footmark-text">我的足迹</text>
			</view>
		</view>

		<!-- 为你推荐 -->
		<view class="divider-with-text">
			<view class="divider-line"></view>
			<text class="divider-text">为你推荐</text>
			<view class="divider-line"></view>
		</view>

		<!-- 商品列表 -->
		<view class="user-goods-list">
			<!-- 商品项 -->
			<view class="user-goods-item" v-for="item in userGoodsData" :key="item.id" @click="subPagesDetail(item.id)">
				<!-- 商品图片 -->
				<image class="user-goods-img" :src="item.img_url"></image>
				<!-- 商品标题区域 -->
				<view class="user-goods-title-area">
					<!-- 商品标题 -->
					<view class="user-goods-title">{{ item.title }}</view>
					<!-- 商品标题区域底部 -->
					<view class="user-goods-foot">
						<!-- 商品价格 -->
						<view class="user-goods-price">￥{{ item.sell_price }}</view>
						<!-- 商品销售量 -->
						<view class="user-goods-sales">{{ item.buy }}人购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from '@/utils/navigate'
	import { ref } from 'vue'
	const loading = ref(false)
	const userGoodsData = ref([])
	import { getGoodsList }  from '/api/index.js'
	import { onLoad } from '@dcloudio/uni-app'
	import http from '../../api/request'


	// 获取用户页面商品列表
	const fetchUserGoodsList = async () => {
		loading.value = true
		const res = await getGoodsList()
	}
	
	// 点击上传或更换头像 TODO
	// const updataAvatar = () => {
	// 	uni.chooseImage({
	// 	})
	// }
	
	// 跳转到详情页面(分包)
	const subPagesDetail = (id) => navigateTo(`/subPages/goodsDetail?id=${id}`)
	
	//  跳转到我的订单页面,跳转方式如下
	const subOrder = () => navigateTo('/subPages/myOrder')

	// 跳转到地址管理页面
	const subAddress = () => navigateTo('/subPages/myAddress')

	// 跳转到我的足迹页面
	const subFootmark = () => navigateTo('/subPages/myFootmark')

	// 跳转到我的登录页面
	const userLoginPage = () => navigateTo('/pages/index/login')

	// 跳转到我的设置页面
	const subSetting = () => navigateTo('/subPages/mySetting')

	// 页面生命周期
	onLoad(() => {
		fetchUserGoodsList()
	})
	
</script>

<style lang="scss">
	// 页面设置
	.user-box {
		width: 100vw;
		height: 100vh;

		// 头部用户区域
		.user-area {
			width: px2rpx(375);
			height: px2rpx(88);
			background: linear-gradient(to right, #fff07d, #ff0000);
			display: flex;
			justify-content: space-between;
			align-items: center;

			// 头像
			.avatar {

				// 头像图标
				.avatar-icon {
					width: px2rpx(60);
					height: px2rpx(60);
				}
			}

			// 用户登录
			.user-login {
				.user-login-btn {
					color: rgba(248, 248, 248, 0.9);
					background-color: rgba(248, 248, 248, 0.2);
				}
			}

			// 用户名区域
			.user-name-area {

				// 用户名
				.user-name {
					color: rgba(248, 248, 248, 0.9);
					font-size: px2rpx(18);
					width: px2rpx(92);
					height: px2rpx(18);
				}
			}

			// 设置区域
			.setting {
				display: flex;
				flex-direction: column;
				align-items: center;

				// 设置图标
				.setting-icon {
					width: px2rpx(20);
					height: px2rpx(20);
				}

				// 设置文本名字
				.setting-name {
					color: rgba(248, 248, 248, 0.9);
					font-size: px2rpx(18);
					width: px2rpx(38);
					height: px2rpx(14);
				}
			}
		}

		// 订单区域
		.order-area {
			margin: px2rpx(10) 0;
			padding: px2rpx(10) px2rpx(6);
			width: px2rpx(375);
			height: px2rpx(76);
			display: flex;
			justify-content: space-around;
			align-items: center;

			// 我的订单
			.order-msg {
				display: flex;
				flex-direction: column;
				align-items: center;

				// 订单图标
				.order-icon {
					width: px2rpx(30);
					height: px2rpx(30);
				}

				// 订单文本备注
				.order-text {
					width: px2rpx(56);
					height: px2rpx(14);
				}
			}

			// 地址管理
			.address-msg {
				display: flex;
				flex-direction: column;
				align-items: center;

				// 地址图标
				.address-icon {
					width: px2rpx(30);
					height: px2rpx(30);
				}

				// 地址文本备注
				.address-text {
					width: px2rpx(56);
					height: px2rpx(14);
				}
			}

			// 我的足迹
			.footmark-msg {
				display: flex;
				flex-direction: column;
				align-items: center;

				// 足迹图标
				.footmark-icon {
					width: px2rpx(30);
					height: px2rpx(30);
				}

				// 足迹文本备注
				.footmark-text {
					width: px2rpx(66);
					height: px2rpx(14);
				}
			}
		}

		// 分隔线区域
		.divider-with-text {
			display: flex;
			align-items: center;

			// 分隔线
			.divider-line {
				flex: 1;
				height: px2rpx(0.25);
				background-color: #b3b3b3;
			}

			// 分隔线文本设置
			.divider-text {
				padding: px2rpx(20) px2rpx(10);
				color: #999;
				font-size: px2rpx(12);
			}
		}

		// 推荐商品列表
		.user-goods-list {
			display: grid;
			place-items: center;
			grid-template-columns: repeat(2, 1fr);
			background-color: #e7e7e7;

			.user-goods-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: px2rpx(5) 0;
				background-color: white;
				width: px2rpx(170);
				height: px2rpx(264);

				.user-goods-img {
					width: px2rpx(170);
					height: px2rpx(174);
				}

				.user-goods-title-area {
					width: px2rpx(170);
					height: px2rpx(58);

					.user-goods-title {
						// 隐藏溢出内容
						overflow: hidden;
						// 禁止换行
						white-space: nowrap;
						// 显示省略号
						text-overflow: ellipsis;
						width: px2rpx(166);
						height: px2rpx(22);
					}

					.user-goods-foot {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: px2rpx(166);
						height: px2rpx(42);

						.user-goods-price {
							color: #f50;
							padding: px2rpx(10) 0;
							width: px2rpx(43);
							height: px2rpx(14);
						}

						.user-goods-sales {
							font-size: px2rpx(12);
							width: px2rpx(65);
							height: px2rpx(12);
						}
					}
				}
			}
		}
	}
</style>